<template>
  <div class="envCompliance">
    <div class="content">
      <el-row class="title">
        <el-col :span="8">
          <span class="title-name"
            >环境达标率
            <!--<span class="unit">(%)</span>--></span
          >
        </el-col>
        <el-col :span="16">
          <div class="right"></div>
        </el-col>
      </el-row>

      <div class="flex-box">
        <div class="content-flex1">
          <process
            chartId="tem"
            :percentage="temperature.rate"
            :color="changeColor(temperature.rate)"
            :level="temperature.level"
            title="温度"
          ></process>
          <process
            chartId="co2"
            :percentage="co2.rate"
            :color="changeColor(co2.rate)"
            :level="co2.level"
            title="CO₂"
          ></process>
        </div>
        <div class="content-flex2">
          <process
            chartId="pm25"
            :percentage="pm25.rate"
            :color="changeColor(pm25.rate)"
            :level="pm25.level"
            title="PM2.5"
          ></process>
        </div>
        <div class="content-flex3">
          <process
            chartId="humidity"
            :percentage="humidity.rate"
            :color="changeColor(humidity.rate)"
            :level="humidity.level"
            title="湿度"
          ></process>

          <process
            chartId="illuminance"
            :percentage="illuminance.rate"
            :color="changeColor(illuminance.rate)"
            :level="illuminance.level"
            title="照度"
          ></process>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { healthRate } from "@/api/sceneManage";
import Process from "./components/process";
export default {
  name: "envCompliance",
  components: { Process },
  inject: ["curFieldPatternId", "curDate"],
  data() {
    return {
      chart: null,
      temperature: {
        rate: 0,
      },
      humidity: {
        rate: 0,
      },
      pm25: {
        rate: 0,
      },
      co2: {
        rate: 0,
      },
      illuminance: {
        rate: 0,
      },
      width: 180,
    };
  },
  computed: {
    fieldPatternId() {
      return this.curFieldPatternId();
    },
    ts() {
      return this.curDate();
    },
  },
  watch: {
    ts: {
      handler(val) {
        if(val){
        this.getData();
        }
      },
    },
  },
  mounted() {
    window.addEventListener("resize", this.resizeHandler);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeHandler);
  },
  methods: {
    getData() {
      console.log("/************-");
      
      let temperatureData = {
        fieldPatternId: this.fieldPatternId,
        ts: this.ts,
        type: "ROBOT_TEMPERATURE",
      };
      let humidityData = {
        fieldPatternId: this.fieldPatternId,
        ts: this.ts,
        type: "ROBOT_HUMIDITY",
      };
      let pm25Data = {
        fieldPatternId: this.fieldPatternId,
        ts: this.ts,
        type: "ROBOT_PM25",
      };
      let co2Data = {
        fieldPatternId: this.fieldPatternId,
        ts: this.ts,
        type: "ROBOT_CO2",
      };
      let illuminanceData = {
        fieldPatternId: this.fieldPatternId,
        ts: this.ts,
        type: "ROBOT_LUX",
      };
      healthRate(temperatureData).then((res) => {
        let resData = res.value;

        this.temperature.rate =
          resData.rate == "NaN" ? 0 : parseInt(resData.rate.toFixed(2) * 100);
        // this.temperature.level = resData.level < 0 ? "N/A" : resData.level;
        this.temperature.level = resData.description;
      });
      healthRate(humidityData).then((res) => {
        let resData = res.value;
        this.humidity.rate =
          resData.rate == "NaN" ? 0 : parseInt(resData.rate.toFixed(2) * 100);
        this.humidity.level = resData.description;
      });
      healthRate(pm25Data).then((res) => {
        let resData = res.value;
        this.pm25.rate =
          resData.rate == "NaN" ? 0 : parseInt(resData.rate.toFixed(2) * 100);
        this.pm25.level = resData.description;
      });
      healthRate(co2Data).then((res) => {
        let resData = res.value;
        this.co2.rate =
          resData.rate == "NaN" ? 0 : parseInt(resData.rate.toFixed(2) * 100);
        this.co2.level = resData.description;
      });
      healthRate(illuminanceData).then((res) => {
        let resData = res.value;
        this.illuminance.rate =
          resData.rate == "NaN" ? 0 : parseInt(resData.rate.toFixed(2) * 100);
        this.illuminance.level = resData.description;
      });
    },
    resizeHandler(e) {
      if (window.innerWidth <= 1670) {
        this.width = 150;
      } else {
        this.width = 170;
      }
    },
    changeColor(val) {
      if (val <= 25) {
        return "#FE4516";
      } else if (val >= 26 && val <= 50) {
        return "#FEA917";
      } else if (val >= 51 && val <= 75) {
        return "#FCD32E";
      } else if (val >= 76 && val <= 100) {
        return "#3BC421";
      } else {
        return "#FE4516";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.envCompliance {
  background-color: #fff;
  width: 100%;
  background-color: #fff;
  border-radius: 4px;
  padding: 20px;
  .flex-box {
    padding: 20px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    .content-flex1,
    .content-flex3 {
      height: 370px;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
    }
  }
  .title {
    align-items: center;
    .title-name {
      font-family: "Microsoft YaHei";
      font-style: normal;
      font-weight: 700;
      font-size: 16px;
      line-height: 21px;
      color: #000000;

      .unit {
        // font-size: 12px;
        font-weight: 400;
        line-height: 27px;
        color: #707070;
      }
    }
    .right {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
    .env-type {
      font-size: 12px;
      font-weight: 400;
      //   line-height: 16px;
      color: #262626;
      display: flex;
      align-items: center;
      margin-left: 10px;
      .clear-div {
        margin-left: 3px;
        width: 19px;
        height: 6px;
        background: #2d9dff;
      }
      .half-clear-div {
        margin-left: 3px;
        width: 19px;
        height: 6px;
        background: #ffad32;
      }
      .pollution-div {
        margin-left: 3px;
        width: 19px;
        height: 6px;
        background: #b6c2d2;
      }
    }
  }
}
@media screen and (max-width: 1670px) {
  .circle-box {
    margin: auto;
    position: relative;
    text-align: center;
    width: 145px;
    .rate {
      font-size: 12px;
      font-weight: 400;
      line-height: 16px;
      color: #707070;
      text-align: center;
    }

    .excellent {
      color: green;
      font-size: 18px;
    }
    .better {
      color: #00cc33;
      font-size: 18px;
    }
    .good {
      color: blue;
      font-size: 18px;
    }
    .secondary {
      color: #0099ff;
      font-size: 18px;
    }
    .poor {
      color: #ff6600;
      font-size: 18px;
    }
    .bad {
      color: red;
      font-size: 18px;
    }
    .circle-center {
      width: 80px;
      height: 80px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -40px;
      margin-top: -40px;
      .num {
        font-size: 36px;
        font-weight: 400;
        line-height: 43px;
        color: #0a0a0a;
      }
      .name {
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        color: #707070;
      }
    }
  }
}
</style>
